<template>
  <div class="filter-panel">
    <div class="filter-header" @click="toggleExpand">
      <span class="title">筛选条件</span>
      <el-icon class="toggle-icon" :class="{ 'is-rotate': isExpanded }">
        <arrow-down />
      </el-icon>
    </div>
    <el-form label-width="80px" :model="filterForm" size="default">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="会议室">
            <el-input v-model="filterForm.roomName" clearable placeholder="会议室名称" @change="handleFilterChange" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="位置">
            <el-select v-model="filterForm.position" clearable placeholder="选择位置" style="width: 100%" @change="handleFilterChange">
              <el-option v-for="item in positionOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="容量">
            <el-select v-model="filterForm.capacity" clearable placeholder="容量范围" style="width: 100%" @change="handleFilterChange">
              <el-option label="1-5人" value="1-5" />
              <el-option label="6-10人" value="6-10" />
              <el-option label="11-20人" value="11-20" />
              <el-option label="20人以上" value="20+" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="设备">
            <el-select v-model="filterForm.equipment" clearable placeholder="选择设备" style="width: 100%" @change="handleFilterChange">
              <el-option label="投影仪" value="投影仪" />
              <el-option label="电视" value="电视" />
              <el-option label="白板" value="白板" />
              <el-option label="视频会议" value="视频会议" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="状态">
            <el-select v-model="filterForm.status" clearable placeholder="使用状态" style="width: 100%" @change="handleFilterChange">
              <el-option label="空闲中" value="free" />
              <el-option label="使用中" value="inUse" />
              <el-option label="需审批" value="needApproval" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="日期">
            <el-date-picker
              v-model="filterForm.date"
              placeholder="选择日期"
              style="width: 100%"
              type="date"
              value-format="YYYY-MM-DD"
              @change="handleDateChange"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24" style="text-align: center">
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ArrowDown } from '@element-plus/icons-vue'
import dayjs from 'dayjs'
import { defineEmits, reactive, ref } from 'vue'

// 筛选条件表单
interface FilterForm {
  roomName: string
  position: string
  capacity: string
  equipment: string
  status: string
  date: string
}

// 位置选项列表
const positionOptions = [
  { label: '总部大楼A区', value: 'A' },
  { label: '总部大楼B区', value: 'B' },
  { label: '研发中心', value: 'RD' },
  { label: '创新中心', value: 'IC' },
]

// 发射事件
const emit = defineEmits(['filter', 'date-change'])

// 控制筛选面板展开/折叠
const isExpanded = ref(true)

// 筛选表单数据
const filterForm = reactive<FilterForm>({
  roomName: '',
  position: '',
  capacity: '',
  equipment: '',
  status: '',
  date: dayjs().format('YYYY-MM-DD'),
})

// 切换筛选面板展开/折叠
const toggleExpand = () => {
  isExpanded.value = !isExpanded.value
}

// 处理筛选条件变化
const handleFilterChange = () => {
  // 可以在这里进行防抖处理
}

// 处理日期变化
const handleDateChange = () => {
  emit('date-change', filterForm.date)
}

// 查询按钮点击
const handleSearch = () => {
  const formData = { ...filterForm }

  // 处理容量范围
  if (formData.capacity) {
    const rangeMap: Record<string, { min: number; max: number }> = {
      '1-5': { min: 1, max: 5 },
      '6-10': { min: 6, max: 10 },
      '11-20': { min: 11, max: 20 },
      '20+': { min: 20, max: 999 },
    }

    if (rangeMap[formData.capacity]) {
      formData.capacityRange = rangeMap[formData.capacity]
    }
  }

  emit('filter', formData)
}

// 重置筛选条件
const handleReset = () => {
  // 保留当前日期，重置其他条件
  const currentDate = filterForm.date
  Object.keys(filterForm).forEach((key) => {
    if (key !== 'date') {
      ;(filterForm as any)[key] = ''
    }
  })
  filterForm.date = currentDate

  // 触发筛选事件
  handleSearch()
}
</script>

<style scoped>
.filter-panel {
  margin-bottom: 16px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
}

.title {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

.toggle-icon {
  transition: transform 0.3s;
}

.toggle-icon.is-rotate {
  transform: rotate(180deg);
}

.filter-content {
  padding: 16px;
}
</style>
